/* eslint-disable max-len */
/* eslint-disable no-multiple-empty-lines */
/* eslint-disable prettier/prettier */
import camelCase from "camelcase";
import _map from "lodash/map";
import _ from "lodash";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import React, { Component } from "react";
import { View, StyleSheet, Text, TouchableOpacity, Alert, Image } from "react-native";
import { Divider, Utils, TYFlatList, Popup, TopBar } from "tuya-panel-kit";
import shallowCompare from "react-addons-shallow-compare";
import TYSdk from "../../api";
import dpCodes from "../../config/dpCodes";
import { store } from "../../redux/configureStore";
import SwitchButton from "../../components/SwitchButton";
import Res from "../../res";
import { debounce } from "../../utils";
import Strings from "../../i18n";

const { convertX: cx } = Utils.RatioUtils;
const { convertY: cy, viewWidth, viewHeight } = Utils.RatioUtils;

const TYEvent = TYSdk.event;
const TYDevice = TYSdk.device;
const TYNative = TYSdk.native;
const TYMobile = TYSdk.mobile;

const {
  temperature_warn_on: temperature_warn_onCode,
  temperature_warn_min: temperature_warn_minCode,
  temperature_warn_max: temperature_warn_maxCode,
  fishtank_temperature_type: fishtank_temperature_typeCode
} = dpCodes;

class TempSetting extends Component {

  constructor(props) {
    super(props);

    const { temperature_warn_on, temperature_warn_min, temperature_warn_max, fishtank_temperature_type } = this.props;

    let min, max, high_obj, low_obj, setMin, setMax;
    let highTempRange = [];
    let lowTempRange = [];

    // 0~40℃ 32~104℉
    if (fishtank_temperature_type === "celsius") {
      console.log('temperature_warn_min:'+temperature_warn_min);
      console.log('temperature_warn_max:'+temperature_warn_max);
      setMin = 0;
      setMax = 40;

      if (temperature_warn_min) {
        min = Number(temperature_warn_min) + 1;
      } else {
        min = 0;
      }

      for (let i = min; i <= 40; i++) {
        high_obj = {
          label: i,
          value: i
        };
        highTempRange.push(high_obj);
      }
      console.log('high:'+highTempRange);

      if (temperature_warn_max) {
        max = Number(temperature_warn_max) - 1;
      } else {
        max = 40;
      }
      for (let y = 0; y <= max; y++) {
        low_obj = {
          label: y,
          value: y
        };
        lowTempRange.push(low_obj);
      }
      console.log('low:'+lowTempRange);

    } else {
      console.log('temperature_warn_min:'+temperature_warn_min);
      console.log('temperature_warn_max:'+temperature_warn_max);
      setMin = 32;
      setMax = 104;
      if (temperature_warn_min) {
        min = Number(temperature_warn_min) + 1;
      } else {
        min = 32;
      }
      console.log('min:'+min);
      for (let i = min; i <= 104; i++) {
        high_obj = {
          label: i,
          value: i
        };
        highTempRange.push(high_obj);
      }
      console.log('high:'+highTempRange);

      if (temperature_warn_max) {
        max = Number(temperature_warn_max) - 1;
      } else {
        max = 104;
      }
      console.log('max:'+max);
      for (let y = 32; y <= max; y++) {
        low_obj = {
          label: y,
          value: y
        };
        lowTempRange.push(low_obj);
      }
      console.log('low:'+lowTempRange);
      
    }

    this.state = {
      tempWarn: temperature_warn_on,
      tempMin: temperature_warn_min,
      tempMax: temperature_warn_max,
      setMin : setMin,
      setMax : setMax,
      lowTempRange: lowTempRange,
      highTempRange : highTempRange,
      tempUnit: fishtank_temperature_type === "celsius" ? "℃" : "℉",
      showTop:true,
    };

  }

  tempPopupClicked = (v => {
    const { temperature_warn_min, temperature_warn_max } = this.props;
    let {lowTempRange, highTempRange, setMax, setMin } = this.state;
    const title = v === 1 ? Strings.temp_warning_min_title : Strings.temp_warning_max_title;//'最低温度' : '最高温度';
    let tempRange = v === 1 ? lowTempRange : highTempRange;
    Popup.picker({
      dataSource: tempRange,
      title: title,
      cancelText: Strings.cancel,//"取消",
      confirmText: Strings.ok,//"确认",
      confirmTextStyle: { fontSize: 16, fontWeight: 'bold', color: '#22a8dc' },
      titleTextStyle: { fontSize: 16, fontWeight: 'bold', },
      value: v === 1 ? temperature_warn_min : temperature_warn_max,
      onMaskPress: ({ close }) => close(),
      onConfirm: (value, idx, { close }) => {
        if (v === 1) {
          console.log(temperature_warn_min);
          TYDevice.putDeviceData({
            temperature_warn_min: value
          });
          let newTempRange = [];
          let obj;
          for (let i = value + 1; i <= setMax; i++) {
            obj = {
              label: i,
              value: i
            };
            newTempRange.push(obj);
          }
          this.setState({ highTempRange: newTempRange });

        } else {
          TYDevice.putDeviceData({
            temperature_warn_max: value
          });
          let newTempRange = [];
          let obj;
          for (let i = setMin; i <= value - 1; i++) {
            obj = {
              label: i,
              value: i
            };
            newTempRange.push(obj);
          }
          this.setState({ lowTempRange: newTempRange });
        }
        close();
      }
    });
  });
  
  topView() {
    return (
      <TopBar.Container
        background="#FFFFFF"
        style={{ height: TopBar.height }}
        contentStyle={{ height: TopBar.height, marginTop: 10 }}
      >
        <TopBar.Action size={20} source={Res.fback} color="#4C4C4C" onPress={() => TYSdk.Navigator.pop()} />
        <TopBar.Content />
      </TopBar.Container>
    );
  }



  render() {
    const { temperature_warn_on, temperature_warn_min, temperature_warn_max, fishtank_temperature_type } = this.props;
    const { tempUnit, tempRange, showTop } = this.state;
    // 温度提醒 冷水鱼(10~18°C)、温水鱼(12~24°C)、热带鱼(20~30°C)   超出温度不大于2°C  超出温度大于2°C
    let cold_water_fish;
    let warm_water_fish;
    let tropical_fish;
    let range_temp;
    if (fishtank_temperature_type === "celsius"){
      cold_water_fish = '10~18°C';
      warm_water_fish = '12~24°C';
      tropical_fish = '20~30°C';
      range_temp = '2°C';
    }else {
      cold_water_fish = '50~64.4℉';
      warm_water_fish = '53.6~75.2℉';
      tropical_fish = '68~86℉';
      range_temp = '35.6℉';
    }
    const tips = Strings.formatValue('temp_warning_tips', cold_water_fish, warm_water_fish, tropical_fish, range_temp)




    return (

      <View style={styles.container}>
        { showTop ? this.topView() : null }
        <View style={{
          backgroundColor: "#FFFFFF",
          height: 60,
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between"
        }}>
          {/* 温度提醒设置 */}
          <Text style={{ marginStart: 30, fontSize: 30, color: "#333333" }}>{Strings.page_title_temp_warning}</Text>
        </View>

        {/* 开关 */}
        <View style={styles.cell}>
          <Text style={styles.boldText}>{Strings.pump_switch_title}</Text>
          <SwitchButton
            style={{ marginRight: 10 }}
            value={temperature_warn_on}
            onValueChange={v => {
              TYDevice.putDeviceData({
                temperature_warn_on: v
              });
            }}
          />
        </View>

        {/* 最低温度 */}
        <TouchableOpacity
          style={styles.cell}
          onPress={() => {
            this.tempPopupClicked(1);
          }}>
          <Text style={styles.boldText}>{Strings.temp_warning_min_title}</Text>
          <View style={styles.row}>
            <Text style={[styles.subTitle ]}>{temperature_warn_min + tempUnit}</Text>
            <Image source={Res.enter} />
          </View>
        </TouchableOpacity>

        {/* 最高温度 */}
        <TouchableOpacity
          style={styles.cell}
          onPress={() => {
            this.tempPopupClicked(2);
          }}>
          <Text style={styles.boldText}>{Strings.temp_warning_max_title}</Text>
          <View style={styles.row}>
            <Text style={[styles.subTitle ]}>{temperature_warn_max + tempUnit}</Text>
            <Image style={styles.arrow} source={Res.enter} />
          </View>
        </TouchableOpacity>


        <View style={{ marginTop:20, marginLeft: 30, marginRight: 30, height: 500 }}>
          <Text style={styles.tipsTitle}>{tips}</Text>
        </View>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  },
  cell: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: '#fff',
    height: 60,
    marginStart: 30,
    marginEnd: 20,
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  boldText: {
    // marginTop: 20,
    // marginStart: 20,
    // height: 30,
    marginLeft: 0,
    fontSize: 16,
    fontWeight: 'bold',
    color: '#000',
  },
  subTitle: {
    fontSize: 14,
    fontWeight: 'normal',
    color: '#939494',
  },
  tipsTitle: {
    marginTop: 5,
    fontSize: 14,
    fontWeight: 'normal',
    color: '#636363',
  },
});

export default connect(({ dpState }) => ({
  temperature_warn_on: dpState[temperature_warn_onCode],
  temperature_warn_min: dpState[temperature_warn_minCode],
  temperature_warn_max: dpState[temperature_warn_maxCode],
  fishtank_temperature_type: dpState[fishtank_temperature_typeCode]
}))(TempSetting);
